import React, { useState } from "react";
import { useNavigate, Navigate } from "react-router-dom";
import { Button, Form, Input, message, Spin } from "antd";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { useDispatch } from "react-redux";
import "./login.css"
import { fetchLogin } from "../../store/modules/userStore";



const Login = () => {
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const [loading, setLoading] = useState(false);
    const [form] = Form.useForm();

    const onFinish = (values) => {
        if(!values.password || !values.identificationNumber){
            return message.open({
                type: 'warning',
                content: '请输入用户名和密码'
            })
        }else{
            dispatch(fetchLogin(values)).then((res) => {
                if (res && res.code === 0  ) {
                    localStorage.setItem("token", res.data.token);
                    if(res.data.role === 'student'){
                    navigate('/ptuser/home')
                    }
                    else{
                        navigate('/admin/')
                    }
                }
                else {
                    message.error(res?.msg || '登录失败');
                }
            });
        }
    }
    
     const handleRegisterClick = () => {
        navigate('/register'); // Assuming your registration route is '/register'
    }


    return (
        <div className="login-container">
            <Spin spinning={loading}>
                <Form
                    form={form}
                    onFinish={onFinish}
                    initialValues={{remember: true}}
                >
                    <Form.Item
                        name="identificationNumber"
                        rules={[
                            {required: true, message: "请输入用户名"},
                            {pattern: /^[a-zA-Z0-9_-]{4,16}$/, message: "用户名格式不正确"}
                        ]}
                    >
                        <Input
                            prefix={<UserOutlined/>}
                            placeholder="用户名"
                            autoComplete="username"
                        />
                    </Form.Item>

                    <Form.Item
                        name="password"
                        rules={[
                            {required: true, message: "请输入密码"},
                            {min: 6, message: "密码不能少于6位"}
                        ]}
                    >
                        <Input.Password
                            prefix={<LockOutlined/>}
                            placeholder="密码"
                            autoComplete="current-password"
                        />
                    </Form.Item>

                    <Form.Item>
                        <Button
                            type="primary"
                            htmlType="submit"
                            block
                            loading={loading}
                        >
                            登录
                        </Button>
                    </Form.Item>


                    <Form.Item>
                        
                                <Button 
                                    type="link" 
                                    onClick={handleRegisterClick}
                                >
                                    没有账号？立即注册
                                </Button>
                         
                    </Form.Item>
                </Form>
            </Spin>
        </div>
    );
};

export default Login;